<template>
    <div class="tcp">
        <el-dropdown popper-class="tcp_dropdown" trigger="click" max-height="200" @visible-change="changetcpdrop">
            <div class="el-dropdown-link">
                <img v-if="isopendrop == 0" src="@/assets/tcp.png" style="width: 15px;height: 15px" alt="">
                <img v-if="isopendrop == 1" src="@/assets/tcp-active.png" style="width: 15px;height: 15px" alt="">
                <div style="margin-left: 8px" :style="isopendrop == 0 ? 'color: #666666;' : 'color: #3711d8;'">网络切换</div>
                <div>({{ selectedNetwork.name }}-<span :style="speedStyle(selectedNetwork.speed)">{{ selectedNetwork.speed == -1 ? '超时' : `${selectedNetwork.speed} ms` }}</span>)</div>
            </div>
            <template #dropdown>
                <el-dropdown-menu style="width: 300px;">
                    <el-dropdown-item v-for="item in userStore.IPList" :key="item.name" @click="handleSelectNetwork(item)"> 
                        <div class="tcp_item">
                            <div class="names">
                                <div style="width: 16px;height: 16px">
                                    <img src="@/assets/tcp-yes.png" v-if="userStore.activeIp == item.name" style="width: 16px;height: 16px" alt="">
                                </div>
                                <div style="margin-left: 8px;font-size: 12px;color: #000;">{{ item.name }}</div>
                            </div>

                            <div :style="speedStyle(item.speed)" style="font-size: 12px;">{{ item.speed == -1 ? '超时' : `${item.speed} ms` }}</div>
                        </div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { setApiBaseUrl } from '@/utils/http';
import { setApiBaseUrls} from '@/utils/uc-http';
const userStore = useUserStore()

const textcolor = ref('#666666')
const isopendrop = ref(0)
const selectedNetwork = computed(() => {
  const activeIp = userStore.activeIp;
  const activeNetwork = userStore.IPList.find(item => item.name === activeIp);
  return activeNetwork ? {
    name: activeNetwork.name,
    speed: activeNetwork.speed,
  } : { name: '未选中', speed: -1 }; // 默认值
});
const handleSelectNetwork = (item) => {
    console.log(item);
    
    
    // 更新活动 IP 地址
    userStore.activeIp = item.name;

    const networkInfo = {
        line_code: item.line_code,
        name: item.name,
        api: item.api
    }
    
    // 存储选中的网络信息到 localStorage
    localStorage.setItem('selectedNetwork', JSON.stringify(networkInfo));
    
    setApiBaseUrl(networkInfo);
    setApiBaseUrls(networkInfo)
    userStore.wsenv = item.api.ws != null ? item.api.ws : 'ws.api.ib-bet.com'
    // 关闭下拉菜单
    isopendrop.value = 0;
};

const speedStyle = (value) => {
    let str = ''
    if (value == -1) {
        str = 'color: #ff5f58;'
    } else if (value >= 0 && value < 500) {
        str = 'color: #1cc535;'
    } else if (value >= 500 && value < 1500) {
        str = 'color: #feac2e;'
    } else {
        str = 'color: #ff5f58;'
    }
    return str
}

const changetcpdrop = (value) => {
    if (value) {
        textcolor.value = '#3711d8'
        isopendrop.value = 1
    } else {
        textcolor.value = '#666666'
        isopendrop.value = 0
    }
}

</script>

<style lang="scss" scoped>
.tcp {
    margin-top: 40px;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tcp_item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 4px;

    .names {
        display: flex;
    }
}
</style>

<style>
.tcp_dropdown .el-dropdown-menu {
    border-radius: 0 !important;
}

.tcp_dropdown .el-popper__arrow {
    display: none;
}
</style>